<template>
  <view class="">
    <view class="topTab" @click="goBack">
		<view class="topTabstatus_bar" ></view>
      <image
        class="topIng"
        src="/static/icons/friendInfo_91.png"
        mode="widthFix"
      ></image>
    </view>
	<!-- 页面开始 -->
	<view class="status_bar">
	  <!-- 这里是状态栏 -->
	</view>
	<view class="" style="height: 91rpx;"></view>
	
	
    <view class="headBox">
      <view class="top">
        <view class="leftHead">
          <image
            @click="imgpreview('/static/headImg/'+friend.imgs+'.jpg')"
            class="img"
            :src="'/static/headImg/'+friend.imgs+'.jpg'"
            mode=""
          ></image>
        </view>
        <view class="rightInfo">
          <view class="nameBOx">
            <text>{{friend.name}}</text>
			<template v-if="friend.sex">
				<image class="icon" v-if="friend.sex == '男'" src="/static/icons/nan.png" mode=""></image>
				<image class="icon" v-else src="/static/icons/nv.png" mode=""></image>
			</template>
            
          </view>
          <view class="address"> 地区：{{friend.address}} </view>
        </view>
      </view>
    </view>
    <image
      class="imgBox"
      src="/static/icons/friendInfo_1255.png"
      mode="widthFix"
    ></image>
    <!-- <view class="celline">
			<text>设置备注和标签</text>
			<image class="arrow" src="/static/icons/friend.png" mode=""></image>
		</view>
		<view class="laiyuan">
			<text>来源</text>
			<text  class="text2">来自手机号搜索</text>
		</view>
		<view class="dengdai">
			等待对方验证
		</view> -->
  </view>
</template>

<script setup>
	import {onLoad} from "@dcloudio/uni-app";
	import {
		onMounted,
		ref
	} from "vue";
	const friend = ref({})

function imgpreview(url) {
  // 预览图片
  uni.previewImage({
    urls: [url],
    indicator: "none",
    longPressActions: {
      itemList: ["保存到手机"],
      success: function (data) {
        console.log(
          "选中了第" +
            (data.tapIndex + 1) +
            "个按钮,第" +
            (data.index + 1) +
            "张图片"
        );
      },
      fail: function (err) {
        console.log(err.errMsg);
      },
    },
  });
}
function goBack() {
  uni.navigateBack({
    delta: 1,
  });
}
	onLoad((e)=>{
		console.log(e);
		let data = e.item?JSON.parse(e.item):{}
		friend.value = data
		console.log(data);
	}) 
</script>

<style scoped lang="scss">
page {
  background-color: #ededed;
}
.topTab,.status_bar,.topTabstatus_bar{
	 background-color: #fff !important;
}
.imgBox {
  display: block;
  width: 100%;
}
.topbtns {
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 30rpx;
  .topBtnImg {
    height: 41rpx;
    width: 36rpx;
    object-fit: cover;
  }
}
.dengdai {
  margin-top: 17rpx;
  height: 104rpx;
  line-height: 104rpx;
  padding-left: 30rpx;
  background-color: #fff;
  font-size: 30rpx;
  text-align: center;
  color: #ababab;
}
.laiyuan {
  height: 104rpx;
  line-height: 104rpx;
  padding-left: 30rpx;
  background-color: #fff;
  margin-top: 17rpx;
  font-size: 30rpx;
  .text2 {
    color: #626262;
    margin-left: 100rpx;
  }
}
.celline {
  height: 104rpx;
  line-height: 104rpx;
  padding-left: 30rpx;
  background-color: #fff;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 28rpx;

  .arrow {
    height: 26rpx;
    width: 26rpx;
    object-fit: cover;
  }
}
.headBox {
  padding: 30rpx 0 0 30rpx;
  background-color: #fff;
  .top {
    border-bottom: #ededed solid 1rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 60rpx;
    .rightInfo {
		margin-top: -14rpx;
      .nameBOx {
        font-size: 40rpx;
        font-weight: 550;
        .icon {
          height: 30rpx;
          width: 30rpx;
          object-fit: cover;
          margin-left: 10rpx;
        }
      }
      .address {
        color: rgba(0, 0, 0, 0.5);
        font-size: 30rpx;
        margin-top: 14rpx;
      }
    }
    .leftHead {
      width: 120rpx;
      height: 120rpx;
      min-width: 120rpx;
      overflow: hidden;
      border-radius: 10rpx;
      margin-right: 42rpx;
      .img {
        height: 100%;
        width: 100%;
        object-fit: cover;
      }
    }
  }
}
</style>
